import {defineStore} from "pinia";
import {ref} from "vue"
import type{MenuItem} from "@/types/user"
export const useTabsStore=defineStore("tabs",()=>{
    const tabs=ref<MenuItem[]>([]);
    const currentTab=ref<{name:string,url:string}>({name:"",url:""})

    const addTab=(name:string,url:string,icon:string)=>{
        if(!tabs.value.some((tab)=>tab.url===url)){
            tabs.value.push({name,url,icon})
        }
    }

    const setCurrentTab=(name:string,url:string)=>{
        currentTab.value={name,url}
    }

    const removeTab=(name:string)=>{
        //如果直接删除的标签是当前高亮的，会导致高亮失效，所以需要先找到要删除的tab的索引
        //如果删除的是第一个，则将高亮置为第二个，再利用数组的filter方法删除
        //如果删除的不是第一个，则将高亮置为前一个 ，再利用数组的filter方法删除
        if(currentTab.value.name===name){
            const currentIndex=tabs.value.findIndex(tab=>tab.name===name);
            if(currentIndex!=0){
                currentTab.value=tabs.value[currentIndex-1]
            } else if (currentIndex == 0){
                if(tabs.value.length>0){
                    currentTab.value=tabs.value[currentIndex+1]
                }
            }
        }
        //如果删除的不是高亮的，可直接移除
        tabs.value=tabs.value.filter(tab=>tab.name!==name)
    }


    return {tabs,addTab,currentTab,setCurrentTab,removeTab}
    
})
